<!--
 * @Author: your name
 * @Date: 2021-11-28 20:06:02
 * @LastEditTime: 2021-12-01 20:20:50
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\components\Tag.vue
-->
<template>
  <div class="tag">
    <el-card class="box-card" style="padding: 5px">
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
      </div>
      <div class="tag-main">
        <a-button
          v-for="item in data"
          :key="item.id"
          @click="handlerClick(item.value)"
        >
          {{ item.text + `[${item.num}]` }}
        </a-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "文章标签",
      require: false,
    },
    data: {
      type: Array,
      default: null,
      require: true,
    },
    handlerClick: {
      type: Function,
      default: null,
      require: false,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common/common.scss";
.box-card {
  margin-bottom: 20px;
  @include background_color("card_background");
  @include font_color("text-color");
  border: none;
}
.clearfix {
  font-size: 14px;
  font-weight: bold;
  @include font_color("text-color");
}
.tag-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .ant-btn {
    padding: 0px 10px;
    margin: 5px;
    @include background_color("card_background");
    @include font_color("text-color");
    border: 1px solid;
    @include border_color("btn_border_color");
  }
  .ant-btn:hover {
    border-color: #ff0064 !important;
    color: #ff0064 !important;
  }
}
</style>
